import React, { Component } from 'react';
import Film from "./Film";
import Cinema from "./Cinema";
import Center from "./Center";
class Tabbar extends Component {
    render(){
        return(
            <div>
                {/* {
                    this.state.curr===0 && <Film></Film>
                }
                {
                    this.state.curr===1 && <Cinema></Cinema>
                }
                {
                    this.state.curr===2 && <Center></Center>
                } */}
                
                <ul>
                    {
                        this.props.list.map((item,index)=>
                            <li key={item.id} className={this.props.curr===index ?'active':''} onClick={()=>this.handleClick(index)}>{item.text}</li>
                        )
                    }
                </ul>
            </div>
        )
    }
    handleClick(index){
        // console.log(index)
        this.setState({
            curr:index
        })
        //通知父组件，改父组件的状态
        this.props.event(index)
    }
}

export default Tabbar